<template>
  <div class="h100">
    <div class="equipment-top" @click="gohome()">
      <img src="~@/assets/reception/logo.png" />
    </div>
    <div class="equipment-bac">
      <img src="~@/assets/reception/equipmentSer/background.png" alt="" >
    </div>
    <div class="equipment-main">
      <div class="functional-module">
        <img @click="routerpush('/reception/equipment/orderform')" src="~@/assets/reception/equipmentSer/maintain.png" alt="">
        <img @click="routerpush('/reception/equipment/repairform')" src="~@/assets/reception/equipmentSer/service.png" alt="">
      </div>
      <div class="equipment-detail">
        <div class="a-df" style="margin: 0 auto;">
          <span class="equipment-title">
            <span>Equipment Maintenance</span>&nbsp;&nbsp;&nbsp; | &nbsp;&nbsp;&nbsp;<span class="equipment-title-eng">设备维修</span>
          </span>
        </div>
      </div>
      <div class="equipment-flow">
        <span class="flow-title">服务流程</span>
        <div class="flow-items">
          <div class="flow-item">
            <img src="~@/assets/reception/equipmentSer/Confirmplace.png" alt="" >
            <span class="flow-item-title">1、预约下单</span>
            <span class="flow-item-introduce">预定服务时间</span>
          </div>
          <div class="flow-item">
            <img src="~@/assets/reception/equipmentSer/Advance.png" alt="" >
            <span class="flow-item-title">2、确认上门</span>
            <span class="flow-item-introduce">提前电话沟通</span>
          </div>
          <div class="flow-item">
            <img src="~@/assets/reception/equipmentSer/quotationSer.png" alt="" >
            <span class="flow-item-title">3、报价服务</span>
            <span class="flow-item-introduce">按价目表收费</span>
          </div>
          <div class="flow-item">
            <img src="~@/assets/reception/equipmentSer/acceptancePay.png" alt="" >
            <span class="flow-item-title">4、验收付款</span>
            <span class="flow-item-introduce">确保服务完成</span>
          </div>
        </div>
      </div>
      <div class="fee-standards">
        <span class="fee-standards-title">收费标准</span>
        <span class="fee-standards-introduce">乱收费退差价</span>
        <div class="standards-detail-top">
          水表维修
        </div>
        <div class="standards-detail-items">
          <div v-for="(item,index) in equipmentList" :key="index" class="standards-detail-item">
            <span>{{ item.name }}</span>
            <span>{{ item.value }}</span>
          </div>
        </div>
        <div class="fee-standards-more">
          <span>更多价目& 费用说明</span>
        </div>
      </div>
    </div>
    <div class="equipment-bac-bottom">
      <img src="~@/assets/reception/background2.png" alt="" >
    </div>
  </div>
</template>

<script>
import { getAppGetXMALListApi } from '@/api/resService'

export default {
  name: 'receptionHome',
  components: {
  },
  data () {
    return {
      flipped:false,
      equipmentList:[
        {
          name:'机器上方水管',
          value:'100元/个'
        },
        {
          name:'机器上方水管',
          value:'100元/个'
        },
        {
          name:'机器上方水管',
          value:'100元/个'
        },
        {
          name:'机器上方水管',
          value:'100元/个'
        },
        {
          name:'机器上方水管',
          value:'100元/个'
        },
        {
          name:'机器上方水管',
          value:'100元/个'
        },
        {
          name:'机器上方水管',
          value:'100元/个'
        },
        {
          name:'机器上方水管',
          value:'100元/个'
        },
        {
          name:'机器上方水管',
          value:'100元/个'
        },
        {
          name:'机器上方水管',
          value:'100元/个'
        },
      ],
      casesItemID:'',
      upload:process.env.VUE_APP_API_BASE_URL,
    }
  },
  methods: {
    displayContent(text) {
      if ( text <= 100) {
        return text;
      }
      return text.substring(0, 100) + '...';
    },
    getAppGetXMALList(){
      getAppGetXMALListApi(
        {
          pageSize:10,
          pageIndex:1,
          RMTJ:1,
        }
      ).then((res) => {
        console.log('res',res);
        this.casesList = res.data
      })
      .catch((err) => {
      })
      .finally(() => {
      })
    },
    routerpush(path){
      this.$router.push({ path: path });
    },
    gohome() {
      this.$router.push({ path: '/reception/findServices/index' });
    },
    rollback(){
      this.flipped = !this.flipped
    }
  },
  mounted() {
    // this.getAppGetXMALList()
  },
}
</script>

<style lang="less" scoped >
.equipment-top{
  height: 60px;
  background: #fff;
  padding: 10px 100px ;
  cursor: pointer;
  img{
    height: 40px;
    display: block;
  }
}
.equipment-bac{
  img{
    height: 430px;
    width: 100%;
  }
}
.equipment-main{
  margin-top:30px ;
  .functional-module{
    width: 130px;
    margin-top:10px ;
    display: flex;
    flex-direction:column;
    position: absolute;
    top: 610px;
    left: 10px;
    img{
      margin: 5px 0;
      height: 95px;
      cursor: pointer;
    }
  }
  .equipment-detail{
    margin: 0 auto;
    width: 1600px;
    display: flex;
    .equipment-title{
      color: #444444;
      font-size:24px ;
      display: block;
      line-height: 30px;
      margin: 0 10px;
      display: flex;
      // flex-direction: column;
      .equipment-title-eng{
        // font-size: 14px;
        // margin-top:-10px ;
        color: #926020;
      }
      // margin: 0 auto;
      // border-bottom: 2px solid #1e50ae;
    }

  }
  .equipment-flow{
    margin: 0 auto;
    width: 1000px;
    .flow-title{
      font-size: 24px;
      text-align: center;
      margin: 15px auto;
      display: block;
      color: #000;
    }
    .flow-items{
      display: flex;
      flex-wrap: wrap;
      .flow-item{
        width: 50%;
        display: flex;
        flex-direction: column;
        font-size:18px ;
        img{
          margin: 0 auto;
        }
        .flow-item-title{
          text-align: center;
          margin-top: 15px;
        }
        .flow-item-introduce{
          text-align: center;
          margin-bottom: 15px;
          color: #c3c3c3;
        }
      }
    }
  }
  .fee-standards{
    margin: 20px auto;
    width: 1200px;
    .fee-standards-title{
      font-size: 24px;
      color: #000;
    }
    .fee-standards-introduce{
      margin-left: 20px;
      font-size:16px ;
    }
    .standards-detail-top{
      width: 100%;
      margin: 15px 0;
      padding: 15px 20px;
      font-size: 18px;
      background: #f4f4f4;
    }
    .standards-detail-items{
      display: flex;
      flex-wrap:wrap ;
      padding: 0 20px;
      .standards-detail-item{
        width: 50%;
        display: flex;
        font-size:14px ;
        margin: 15px 0;
        span{
          // width: 50%;
          flex: 1;
        }
      }
    }
    .fee-standards-more{
      margin: 20px auto;
      width: 200px;
      text-align: center;
      line-height: 40px;
      border-radius: 20px;
      border: #e1e1e1 solid 2px;
      cursor: pointer;
    }
  }
}
.equipment-bac-bottom{
  // position: absolute;
  // bottom: -400px;
  width: 100%;
  img{
    height: 180px;
    width: 100%;
  }
}

.card {
    flex: 1;
    height: 200px;
    margin-left: 50px;
    position: relative;
    // background-color: #fff;
    // border: solid 1px #efebec;
    border-radius: 25px;
    text-align: center;
    cursor: pointer;
    transition: transform 0.6s;
}

.flipped .front {
    transform: rotateY(180deg);
}

.flipped .back {
    transform: rotateY(0deg);
}

.front,
.back {
  // margin: 0 auto;
  width: 1600px;
  left: 50%;
  margin-left: -820px;
  position: absolute;
  backface-visibility: hidden;
  border-radius: 10px;
}

.front {
    justify-content: center;
    align-items: center;
    transform: rotateY(0deg);
    transition: transform 0.6s;
}

.back {
    display: flex;
    height: 660px;
    border: solid 2px #e7e7e7;
    transform: rotateY(-180deg);
    transition: transform 0.6s;
    overflow: hidden;
    .rollback{
      position: absolute;
      left: 20px;
      top: 20px;
      .anticon-rollback{
        font-size:24px ;
      }
    }
}
</style>